export default function updateNodeElement(newElement, vDom, oldVDom = {}) {
  const props = vDom.props || {};
  const oldProps = oldVDom.props || {};

  if (vDom.type === 'text') {
    if (props.textContent !== oldProps.textContent) {
      // 更新文本节点
      if (vDom.parent.type !== oldVDom.parent.type) {
        // 父级节点类型不同 那么在对比父级节点的时候 旧的 dom 会被直接替换
        vDom.parent.stateNode.appendChild(document.createTextNode(props.textContent));
      } else {
        // 父级节点类型相同 更新文本
        vDom.parent.stateNode.replaceChild(
          document.createTextNode(props.textContent),
          oldVDom.stateNode
        );
      }
    }
    return;
  }

  Object.keys(props).forEach(attr => {
    let val = props[attr];
    const oldVal = oldProps[attr];
    if (val !== oldVal) {
      if (attr.startsWith('on')) {
        const eventName = attr.toLocaleLowerCase().slice(2);
        newElement.addEventListener(eventName, val);
        if (oldVal) { // 删除原有的事件处理函数
          newElement.removeEventListener(eventName, oldVal);
        }
      } else if (attr === 'value' || attr === 'checked') {
        newElement[attr] = val;
      } else if (attr !== 'children') {
        if (attr === 'className') {
          newElement.setAttribute('class', val);
        } else {
          newElement.setAttribute(attr, val);
        }
      }
    }
  });

  // 判断属性被删除的情况
  // 遍历旧的props 然后用旧的 key 去新的 props 里找 如果没找到 说明被删除了
  Object.keys(oldProps).forEach(attr => {
    const newVal = props[attr];
    if (!newVal) {
      if (attr.startsWith('on')) {
        const eventName = attr.toLocaleLowerCase().slice(2);
        newElement.removeEventListener(eventName, oldProps[attr]);
      } else if (attr !== 'children') {
        if (attr === 'className') {
          newElement.classList.remove(oldProps[attr]);
        } else {
          newElement.removeAttribute(attr);
        }
      }
    }
  });
}
